<template>
  <div class="container" v-loading="isLoading">
    <el-card>
      <template #header>
        <el-form inline ref="searchForm">
          <el-form-item label="社群" prop="news_type">
            <el-select style="width:500px" v-model="searchForm.community_id" placeholder="请选择社群">
              <el-option label="全部" value="" />
              <el-option
                v-for="(oVal, oIdx) of type"
                :key="oIdx"
                v-bind="oVal"
              />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="getList()">查询</el-button>
          </el-form-item>
        </el-form>
      </template>


      <el-table :data="tableData" border>
        <el-table-column prop="title" label="活动名称" />
        <el-table-column prop="comment_num" label="评论数量" />
        <el-table-column prop="community_news_sign_up.length" label="报名数量" />
        <el-table-column prop="create_time" label="发布时间" />
        <!-- <el-table-column prop="thumbnail" label="缩略图">
          <template slot-scope="{ row }">
            <el-image style="width: 100px; height: auto" :src="row.thumbnail" />
          </template>
        </el-table-column>
        <el-table-column prop="community" label="所属社群">
          <template slot-scope="{row}">
            {{communityObj[row.community]}}
          </template>
        </el-table-column> -->
        <!-- <el-table-column prop="sign_up_count" label="报名人数" /> -->
        <el-table-column label="操作" width="300px" align="center">
          <template slot-scope="{ row }">
            <el-button type="text" @click="checkDetail(row)"
              >活动详情</el-button
            >
            <el-button type="text" v-if="row.community_news_sign_up.length>0" @click="signDetail(row)"
              >报名详情</el-button
            >
            <el-button type="text" v-if="row.comment_num>0" @click="checkDebate(row)"
              >查看评论</el-button
            >
            <el-button type="text" class="red" @click="delRowById(row, row.title)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <footer class="footer">
      <el-pagination
        background
        layout="total, sizes, pager, jumper"
        :current-page="searchForm.page"
        :page-sizes="[10, 20, 30, 50, 100]"
        :page-size="searchForm.page_size"
        :total="tableTotal"
        @size-change="changeSize"
        @current-change="changeCurrent"
      />
    </footer>

    <!-- <el-dialog
      :title="(builingForm.$id ? '编辑' : '新增') + '社群活动'"
      :visible.sync="showAddOrEdit"
      width="1000px"
      @open="initCommunity"
      @closed="() => $refs['builingForm'].resetFields()"
    >
      <el-form
        :model="builingForm"
        :rules="builingRules"
        ref="builingForm"
        label-width="5em"
      >
        <el-form-item prop="$id" hidden />
        <el-form-item label="活动名称" prop="title">
          <el-input
            v-model="builingForm.title"
            placeholder="请输入活动名称"
          ></el-input>
        </el-form-item>
        <el-form-item class="span-3" label="所属社群" prop="community">
          <el-select
            v-model="builingForm.community"
            placeholder="请选择所属社群"
          >
            <el-option
              v-for="(oVal, oIdx) of communityType"
              :key="oIdx"
              v-bind="oVal"
            />
          </el-select>
        </el-form-item>
        <el-form-item class="span-3" label="报名上限" prop="allow_count">
          <el-input
            v-model.number="builingForm.allow_count"
            placeholder="请输入允许报名人数"
          ></el-input>
        </el-form-item>
        <el-form-item label="活动时间" prop="date">
          <el-date-picker
            v-model="builingForm.date"
            type="date"
            placeholder="选择日期"
            value-format="yyyy-MM-dd"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="图片" prop="thumbnail">
          <Upload
            v-model="builingForm.$image_uri"
            :file.sync="builingForm.thumbnail"
          />
        </el-form-item>
        <tinymce v-model="builingForm.content" height="300" />
      </el-form>
      <template #footer>
        <el-button
          type="primary"
          @click="submitRowData('builingForm')"
          :loading="loading.update"
          >确 定</el-button
        >
      </template>
    </el-dialog> -->

    <el-dialog title="报名详情" :visible.sync="showSign" width="1200px">
      <el-table :data="signForm.userList">
        <el-table-column property="user_nick_name" label="微信昵称" />
        <el-table-column property="user_avatar_url" label="用户头像">
          <template #default="{row}">
            <el-image
              v-if="row.user_avatar_url"
              style="width: 100px; height: 100px"
              :src="row.user_avatar_url"
              :preview-src-list="[row.user_avatar_url]"
            />
            <span v-else>暂未录入</span>
          </template>
        </el-table-column>
        <el-table-column property="create_time" label="报名时间" />
      </el-table>
    </el-dialog>

    <el-dialog title="帖子评论" :visible.sync="showUserList" width="1200px">
      <el-table :data="debateForm.userList">
        <el-table-column property="user_nick_name" label="微信昵称" />
        <el-table-column property="user_avatar_url" label="用户头像">
          <template #default="{row}">
            <el-image
              v-if="row.user_avatar_url"
              style="width: 100px; height: 100px"
              :src="row.user_avatar_url"
              :preview-src-list="[row.user_avatar_url]"
            />
            <span v-else>暂未录入</span>
          </template>
        </el-table-column>
        <el-table-column property="content" label="评论内容" show-overflow-tooltip />
        <el-table-column property="create_time" label="评论时间" />
        <el-table-column property="like_num" label="点赞数" />
        <!-- <el-table-column label="操作" width="180px" align="center">
          <template #default="{ row }">
            <el-button type="text" @click="deleteDebate(row.id)"
              >评论删除</el-button
            >
          </template>
        </el-table-column> -->
      </el-table>
    </el-dialog>

  </div>
</template>

<script>
import API from "@/api";
import { table, addOrEdit } from "@/utils/mixins";
import Tinymce from "@/components/Tinymce";

export default {
  mixins: [table, addOrEdit],
  components: {
    Tinymce,
  },

  data: () => ({
    tableData:[],
    tableTotal: 0,
    isKey: false,
    type:[],
    isLoading: true,
    showAddOrEdit:false,//编辑
    showSign:false,//报名详情弹窗
    showUserList:false,//用户评论弹窗

    searchForm: {
      community_id:"",
      is_sign_up:true,
      page: 1, // 当前页码
      per_page: 10, // 每页条数
    },

    builingForm: {
      $id:""
    },

    signForm:{
      $id:'',
      userList:[],//用户评论
    },

    debateForm:{
      $id:'',
      userList:[],//用户评论
    },

  }),

  created() {
    API.getAsociationTypeList({ per_page: 60})
      .then(({data}) => {
        let type=data.items.map(item=>{
          return {label:item.name,value:item.id}
        })
        this.type=type
        // this.searchForm.community_id=type[0].value
        this.getList()
      }).catch((err) => {
      }).finally(() =>{
      })
  },

  methods: {
    // 获取列表
    getList(){
      this.isLoading=true
      API.getAsociationPostList(this.searchForm)
        .then(({data}) => {
          this.tableData=data.items
          this.tableTotal=data.total
        }).catch((err) => {
          this.tableData=[]
          this.tableTotal=0
        }).finally(() =>{
          this.isLoading = false;
        })
    },

    // 分页
    changeSize(val){
      this.searchForm.per_page = val
      this.searchForm.page = 1
      this.getList()
    },

    // 分页
    changeCurrent(val){
      this.searchForm.page = val
      this.getList()
    },

    // 查看报名
    signDetail(obj){
      console.log(obj)
      this.signForm.$id=obj.id
      this.signForm.userList=obj.community_news_sign_up
      this.showSign=true
    },

    // 查看评论
    checkDebate(obj){
      this.debateForm.$id=obj.id
      this.debateForm.userList=obj.community_news_comments
      this.showUserList=true
    },

    // 查看详情
    checkDetail(){
      console.log("查看详情")
    }

  },
};

</script>
<style lang="scss" scoped></style>
